<template>
  <div>
    <div
      class="ud-app-loader ud-component--header-v6--header udlite-header"
      data-module-id="common/udlite/desktop"
      data-module-args='{"isInstructorSignupEnabled":false,"isLoggedIn":false,"tryUFBPlacements":{"bar":"ufb_header","profile":"account-menu","mobile":"ufb_header"},"mobileAppLink":{"url":"/mobile/"},"searchPhrase":null}'
      data-module-priority="-10"
    >
      <div data-unique-id="339" style="display: none"></div>

      <div
        class="udlite-text-sm header--header--3sK1h header--flex-middle--2Xqjv"
        data-purpose="header"
      >
        <div class="skip-to-content-button--skip-to-content--1MoIi">
          <button
            type="button"
            class="
              udlite-btn udlite-btn-large udlite-btn-primary udlite-heading-md
              skip-to-content-button--skip-to-content-btn--3Uakj
            "
          >
            <span
              aria-hidden="true"
              class="skip-to-content-button--skip-to-content-shadow--eBW6V"
            ></span
            ><span style="margin: 0">跳转至目录</span>
          </button>
        </div>
        <a href="/" class="header--flex-middle--2Xqjv header--logo--bdAod"
          ><img
            src="../assets/static/picture/logo-coral.svg"
            alt="Udemy"
            width="110"
            height="32"
        /></a>
        <nav
          class="
            header--gap-button--3bIww
            popper--popper--19faV popper--popper-hover--4YJ5J
          "
        >
          <span class="udlite-text-sm header--dropdown-button-text--2jtIM"
            >类别</span
          >
        </nav>

        <div
          class="
            udlite-search-form-autocomplete
            header--search-bar--1_mS0
            udlite-form-group
          "
        >
          <label
            class="udlite-sr-only udlite-form-label udlite-heading-sm"
            for="u339-search-form-autocomplete--3"
            >搜索任何内容</label
          >

          <input
            placeholder="搜索任何内容"
            name="q"
            autoComplete="off"
            value=""
            id="u339-search-form-autocomplete--3"
            class="
              udlite-text-input
              udlite-text-input-small
              udlite-text-sm
              udlite-search-form-autocomplete-input
              js-header-search-field
            "
          />
        </div>

        <van-image round width="5rem" height="5rem" :src="img_src" />

        <div v-if="username != ''">
          欢迎:{{ username }}
          <a href="JavaScript:void(0)" @click="logout">注销</a>
        </div>

        <div v-else>
          <router-link to="/user_login">登录</router-link>/
          <router-link to="/user_register">注册</router-link>
        </div>

        <div style="flex: 1"></div>
      </div>
    </div>
  </div>
</template>

<script type="text/javascript">
import { config, formatXml } from "../config.js";

export default {
  data() {
    return {
      username: localStorage.getItem("username"),
    };
  },
  //接收父组件传递过来的变量
  props: ["img_src"],
  //初始化
  mounted: function () {
    if (localStorage.getItem("username") === null) {
      this.username = "";
    } else {
      this.username = localStorage.getItem("username");
    }
  },
  //自定义方法
  methods: {
    logout: function () {
      //注销就是删除状态
      localStorage.removeItem("username")
      localStorage.removeItem("userid")
      localStorage.removeItem("token")
      
      
      ;
      //用户可能登录 应道跳转
      this.$router.push("/login");
    },
  },
};
</script>

<style type="text/css">
.child {
  width: 40px;
  height: 40px;
  background: #f2f3f5;
  border-radius: 4px;
}
</style>
